<template>
	<view class="module flex_ZC">
		<!-- #ifdef H5 -->
			<uNavbar title="开通账款服务"> </uNavbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<image class="indexbg" :src="baseUrl +'/static/image/indexbg.png'" mode="aspectFill"></image>
		<view class="custom_box">
			<view :style="{height: statusBarHeight + 'px', backgroundColor: backgroundColor }"></view>
			<view class="custom_nav " :style="{height: titleHeight + 'px', backgroundColor: backgroundColor}">
				<image class="goback" :src="baseUrl +'/static/icon/i_left.png'" mode="aspectFill" @click="leftClick">
				</image>
				<text class="f28 c3">开通账款服务</text>
			</view>
		</view>
		<view :style="{height: statusBarHeight + titleHeight + 'px'}" style="width: 100%;"></view>
		<!-- #endif -->

		<view class="sylc_box  flex_Z">
			<text class="sylc">使用流程</text>
			<view class="technological mt20 flex_ld_a">
				<view class="first flex_ZC">
					<image :src="baseUrl +  '/static/icon/i_jbxx.png'" mode="aspectFill"></image>
					<text class="f30 c2 fw7">基本信息</text>
				</view>
				<view class="xuxian flex_dq">
					<image :src="baseUrl +  '/static/icon/i_ls1.png'" mode="aspectFill"></image>
				</view>
				<view class="second flex_ZC">
					<image :src="baseUrl +  '/static/icon/i_bdyhk2.png'" mode="aspectFill"></image>
					<text class="f28 c2 fw7">绑定银行卡</text>
				</view>
				<!-- 				<view class="xuxian2 flex_dq">
					<image :src="baseUrl + '/static/icon/speed1.png'" mode="aspectFill"></image>
				</view>
				<view class="second flex_ZC">
					<image :src="baseUrl +  '/static/icon/i_sqqy.png'" mode="aspectFill"></image>
					<text class="f30 c9  fw7">授权签约</text>
				</view> -->
			</view>
		</view>

		<view class="store_name flex_dq">
			<text>{{storeName}}</text>
		</view>

		<view class="supplement mt24">
			<text class="f32 c3 fw7">选择银行账户类型</text>
			<text class="c32 c1 ml8 mr10"> *</text>
			<view class="lanse ">
				<u-icon name="error-circle" color="#579BFF" size="12"></u-icon>
				<text class="f20 c2">请仔细核验账户信息，以免影响正常结算业务</text>
			</view>
			<view class="flex_dq">
				<view class="select_box flex_dq" v-for="(item,index) in list1" :key="index">
					<text class="btn_select" :class="ids == item.id ? 'active':''"
						@click="changeBtn(item.id)">{{item.name}}</text>
				</view>
			</view>
		</view>

		<view class="supplement mt24" v-if="ids == 2">
			<text class="f32 c3 fw7">上传证明材料 </text>
			<text class="c32 c1 ml8 mr10"> *</text>
			<view class="lanse ">
				<u-icon name="error-circle" color="#579BFF" size="12"></u-icon>
				<text class="f20 c2">可上传开户许可证/基本存款账户信息</text>
			</view>
			<view class="uploads flex_c">
				<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :maxCount="1"
					:maxSize="6 *1024 *1024" @oversize="overSize" width="320" height="190">
					<view class=" flex_ZC">
						<image :src="baseUrl +'/static/image/hyzz.png'" mode="aspectFit"></image>
					</view>
				</u-upload>
			</view>
			<view class="mt24 flex_Z lineb">
				<view class=" flex_dq">
					<text class="f28 c3">开户许可证核准号或基本存款账户编号</text>
				</view>
				<u--input placeholder="请输入" fontSize="14" color="#666666" border="none "
					v-model.trim="bankInfo.open_licence_no" clearable></u--input>
			</view>
		</view>

		<view class="supplement mt24" v-if="ids == 1">
			<text class="f32 c3 fw7">上传证明材料 </text>
			<text class="c32 c1 ml8 mr10"> *</text>
			<view class="lanse ">
				<u-icon name="error-circle" color="#579BFF" size="12"></u-icon>
				<text class="f20 c2">请上传银行卡卡号面</text>
			</view>
			<view class="uploads flex_c">
				<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :maxCount="1"
					:maxSize="6 *1024 *1024" @oversize="overSize" width="320" height="190">
					<view class=" flex_ZC">
						<image :src="baseUrl +'/static/image/hyzz.png'" mode="aspectFit"></image>
					</view>
				</u-upload>
			</view>
		</view>

		<view class="supplement mt24">
			<text class="f32 c3 fw7" v-if="ids == 2">对公账户信息</text>
			<text class="f32 c3 fw7" v-if="ids == 1">对私法人账户信息</text>
			<view class="mt40 flex_Z lineb">
				<view class=" flex_dq">
					<text class="f28 c3">银行卡账户名称</text>
					<text class="c32 c1 ml8 mr10"> *</text>
				</view>
				<u--input placeholder="请输入银行卡账户名称" fontSize="14" color="#666666" disabled border="none "
					v-model.trim="bankInfo.name" clearable></u--input>
			</view>
			<view class="mt24 flex_Z lineb">
				<view class=" flex_dq">
					<text class="f28 c3">银行卡号</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<u--input placeholder="请输入银行卡户号" fontSize="14" color="#666666" border="none "
					v-model.trim="bankInfo.account" clearable></u--input>
			</view>
			<view class="mt24 flex_Z lineb">
				<view class=" flex_dq">
					<text class="f28 c3">银行卡预留手机号</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<u--input placeholder="请输入银行卡预留手机号" fontSize="14" color="#666666" border="none "
					v-model.trim="bankInfo.mobile" clearable></u--input>
			</view>
			<view class="mt24 flex_Z lineb">
				<view class=" flex_dq">
					<text class="f28 c3">银行开户地区</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<view class=" flex_ld" @click="openAddress">
					<u--input placeholder="请选择银行开户地区" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.full_address" clearable></u--input>
					<u-icon name="arrow-right" color="#579BFF" size="12"></u-icon>
				</view>

			</view>
			<view class="mt24 flex_Z lineb">
				<view class=" flex_dq">
					<text class="f28 c3">银行名称</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<view class="yinhang flex_ld" @click="levelOneShow = true">
					<bankChange width='622' :bankCode='bankInfo.bank_code' :bankNames='bankInfo.bank_name' placeholder='银行名称' bankName='银行列表'
						@closeBank='closeBank' @changeBank='changeBank'></bankChange>
					<!-- <u--input placeholder="请选择银行名称" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.bank_name" readonly clearable></u--input>
					<u-icon name="arrow-right" color="#579BFF" size="12"></u-icon> -->
				</view>
			</view>
			<view class="mt24 flex_Z lineb" v-if="ids == 2" @click="levelTwoShow = true">
				<view class=" flex_dq">
					<text class="f28 c3">支行名称</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<view class=" flex_ld">
					<bankChange width='622' ref="zhihang" :bankCode='bankInfo.branch_code' :bankNames='bankInfo.branch_name'
						:bankPcode='bankInfo.bank_code' placeholder='支行名称' bankName='支行列表' @closeBank='closeBank'
						@changeBank='changeBank'></bankChange>
					<!-- <u--input placeholder="请选择支行名称" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.branch_name" readonly clearable></u--input>
					<u-icon name="arrow-right" color="#579BFF" size="12"></u-icon> -->
				</view>
			</view>
		</view>
		<view class="empty3"></view>

		<view class="btns flex_ld">
			<text class="sign_out" @click="leftClick">上一步</text>
			<text class="service" @click="nextStep">提交审核</text>
		</view>

		<!-- <u-popup :show="levelOneShow" mode="bottom" @close="levelOneShow = false" :safeAreaInsetBottom="false" closeable bgColor="transparent">
			<view class="area_popup flex_ZC">
				<view class="titles flex_ZC">
					<text>银行列表</text>
					<view class="titles_input">
						<input type="text"  placeholder="请输入银行名称" v-model.trim="names"   @confirm="isSearch" />
						<u-search bgColor="#f7f7f7" searchIconSize="28" v-model.trim="names" :actionStyle="actionStyle"
							margin="0 16px 0 0" @clear="clearOne" @search="isSearch111" animation @custom="isSearch111"></u-search>
					</view>
				</view>
				<view class="masks"></view>
				<view class="popup_list mt24 flex_Z">
					<view class="area_box" :class="item.id == bankOneId?'active2':''" v-for="(item,index) in kaihuList" :key="index" @click="changeAreaOne(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup> -->

		<!-- <u-popup :show="levelTwoShow" mode="bottom" @close="levelTwoShow = false" :safeAreaInsetBottom="false" closeable bgColor="transparent">
			<view class="area_popup flex_ZC">
				<view class="titles flex_ZC">
					<text>支行列表</text>
					<view class="titles_input">
						<input type="text"  placeholder="请输入支行名称或所在地" v-model.trim="names"   @confirm="isSearch222" />
						<u-search bgColor="#f7f7f7" searchIconSize="28" v-model.trim="names" :actionStyle="actionStyle"
							margin="0 16px 0 0" @clear="clearTwo" @search="isSearch222" animation @custom="isSearch222"></u-search>
					</view>
				</view>
				<view class="masks"></view>
				<view class="popup_list mt24 flex_Z" v-if="zhihangList.length>0">
					<view class="area_box" :class="item.id == bankTwoId?'active2':''" v-for="(item,index) in zhihangList" :key="index" @click="changeAreaTwo(item)">
						<text>{{item.branch_name}}</text>
					</view>
				</view>
				<view class="mt40 flex_ZC" v-else>
					<image class="noImg" :src="baseUrl + '/static/image/noData1.png'" mode="aspectFill"></image>
					<text class="no_tit">请输入支行名称查找</text>
				</view>
			</view>
		</u-popup> -->



		<atAddress ref="scroll" :level="2" @change='chooseSuccess'></atAddress>

	</view>
</template>

<script>
	import {
		baseURL
	} from "../../utils/request.js"
	import {
		settledFourSave,
		settledDetails,
		bankList
	} from "../../api/join.js"
	import bankChange from '@/components/bankList.vue'
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				titleHeight: 0, // 标题栏高度
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,

				names: '',
				storeName: '',
				ids: 2, //对公对私
				bankOneId: '',
				bankTwoId: '',
				sellerId: '', //商家id
				temporarily: {}, //暂存
				halfRoadRoute: '', //半路经图片
				examineState: 1, //是否入驻
				promptShow: false,
				levelOneShow: false,
				levelTwoShow: false,
levelOneShow1: false, //拉起银行
				fileList2: [],
				kaihuList: [],
				zhihangList: [],
				list1: [{
					id: 2,
					name: '对公'
				}, {
					id: 1,
					name: '对私法人'
				}],
				bankInfo: {
					name: '',
					bank_name: '',
					branch_name: '',
					full_address: '',
					mobile: '',
					account: '',
					city_id: '',
					seller_id: '',
					bank_code: '',
					branch_code: '',
					province_id: '',
					payment_type: '',
					card_front_pic: '',
					open_licence_no: '',
				},
				actionStyle: {
					fontSize: '28rpx',
					color: '#FFC300'
				},
			}
		},
		onReady() {
			// #ifdef MP-WEIXIN 
			uni.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight
					console.log(this.statusBarHeight);
				}
			})
			const custombar = uni.getMenuButtonBoundingClientRect();
			this.titleHeight = (custombar.top - this.statusBarHeight) * 2 + custombar.height
			console.log(this.titleHeight);
			// #endif

		},
		onLoad() {
			this.bankOneList()
			this.applicationDetails()
		},
		onShow() {
			// this.applicationDetails()
		},
		components: {
			bankChange
		},
		methods: {
			closeBank() {
				this.levelOneShow1 = false
			},
			// // 选取一级银行
			// changeAreaOne(item) {
			// 	console.log(item);
			// 	this.bankOneId = item.id
			// 	this.bankInfo.bank_code = item.code
			// 	this.bankInfo.bank_name = item.name
			// 	this.levelOneShow = false

			// 	this.bankTwoId = ''
			// 	this.bankInfo.branch_name = ''
			// 	this.bankInfo.branch_code = ''
			// 	this.zhihangList = []
			// },
			// // 选取二级银行
			// changeAreaTwo(item) {
			// 	this.bankTwoId = item.id
			// 	this.bankInfo.branch_code = item.branch_code
			// 	this.bankInfo.branch_name = item.branch_name
			// 	this.levelTwoShow = false
			// },
			changeBank(item) {
				console.log(item);
				if (item.type == 1) {
					this.bankInfo.bank_code = item.code
					this.bankInfo.bank_name = item.name
					this.bankInfo.branch_name = ''
					this.bankInfo.branch_code = ''
					this.$refs.zhihang.branch_name = ''
				} else {
					this.bankInfo.branch_code = item.branch_code
					this.bankInfo.branch_name = item.branch_name
				}

				this.levelOneShow1 = false



			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			// 超出提示
			overSize(event) {
				// console.log(event);
				uni.$u.toast('图片过大,请重新上传!')
			},
			changeBtn(id) {
				this.ids = id
				this.fileList2 = []
				this.halfRoadRoute = ''
				if (this.ids == 1) {
					this.bankInfo.name = this.temporarily.legal_person_name
				} else {
					this.bankInfo.name = this.temporarily.license_name
				}
			},

			//打开地址选择器
			openAddress() {
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				this.bankInfo.full_address = ''
				this.areaState = true
				let value = e.value;
				this.bankInfo.province_id = e.value[0].id
				this.bankInfo.city_id = e.value[1].id

				for (let i = 0; i < value.length; i++) {
					if (this.bankInfo.full_address != value[i].name) {
						if (value[i].name != '县') {
							this.bankInfo.full_address += value[i].name
						}
					}
				}
				console.log(this.bankInfo.full_address);
			},
			// 截取半路经
			getPathAfterCom(url) {
				const parts = url.split('.com');
				return parts.length > 1 ? parts[1] : '';
			},
			// 详情
			applicationDetails() {
				settledDetails().then(res => {
					console.log(res);
					if (res.code == 1) {
						this.storeName = res.data.name
						this.bankInfo.name = res.data.seller_auth.license_name
						this.temporarily = res.data.seller_auth
						if (res.data.bank_card) {
							this.sellerId = res.data.id
							this.ids = res.data.bank_card.payment_type
							this.bankInfo = res.data.bank_card;

							this.fileList2.push({
								'thumb': res.data.bank_card.card_front_pic,
								'status': 'success'
							})
							this.halfRoadRoute = this.getPathAfterCom(res.data.bank_card.card_front_pic)
						}
					}
				})
			},
			// 点击搜索按钮触发
			cilckCustom() {
				console.log('点击搜索按钮触发');
				this.kaihuList = []
				this.bankOneList()
			},
			isSearch111() {
				console.log(1111, this.names);
				this.kaihuList = []
				this.bankOneList()
			},
			// 点击搜索按钮触发
			cilckCustomTwo() {
				console.log('点击搜索按钮触发');
				this.kaihuList = []
				this.bankOneList()
			},
			isSearch222() {
				console.log(2222, this.names);
				if (this.names != '') {
					this.zhihangList = []
					this.bankTwoList()
				}
			},
			// 清空内容
			clearOne() {
				this.names = ''
				this.bankOneList()
			},
			clearTwo() {
				this.names = ''
				this.zhihangList = []
			},
			// 一级银行列表
			bankOneList() {
				let data = {
					code: '',
					name: this.names,
					province_id: this.bankInfo.province_id,
					city_id: this.bankInfo.city_id,
				};
				bankList(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.kaihuList = res.data
					}
				})
			},

			// 二级银行列表
			bankTwoList() {
				let data = {
					code: this.bankInfo.bank_code,
					name: this.names,
					province_id: this.bankInfo.province_id,
					city_id: this.bankInfo.city_id,
				};
				bankList(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.zhihangList = res.data
					}
				})
			},

			// 删除图片
			deletePic(event) {
				console.log(event);
				this[`fileList${event.name}`].splice(event.index, 1);
				this.halfRoadRoute = ''
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen, 1, Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				console.log(url);
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: baseURL + `localSeller/common/upload`,
						filePath: url,
						name: 'file',
						header: {
							"ba-user-token": uni.getStorageSync("token") || ''
						},
						success: (res) => {
							console.log(JSON.parse(res.data).data)
							this.halfRoadRoute = JSON.parse(res.data).data.url
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						}
					});
				});
			},
			// 规则校验
			ruleValidation() {
				if (uni.$u.test.isEmpty(this.halfRoadRoute)) {
					if (this.ids == 1) {
						uni.$u.toast('请上传银行卡卡面');
					} else {
						uni.$u.toast('请上传营业执照');
					}
					return false;
				}
				if (uni.$u.test.isEmpty(this.bankInfo.name)) {
					uni.$u.toast('请输入银行卡账户名称');
					return false;
				}
				if (uni.$u.test.isEmpty(this.bankInfo.account)) {
					uni.$u.toast('请输入银行卡户号');
					return false;
				}
				if (!uni.$u.test.mobile(this.bankInfo.mobile)) {
					uni.$u.toast('请输入预留手机号');
					return false;
				}
				if (uni.$u.test.isEmpty(this.bankInfo.province_id)) {
					uni.$u.toast('请选择银行开户地区');
					return false;
				}
				if (uni.$u.test.isEmpty(this.bankInfo.bank_name)) {
					uni.$u.toast('请选择银行');
					return false;
				}
				if (this.ids == 2) {
					if (uni.$u.test.isEmpty(this.bankInfo.branch_name)) {
						uni.$u.toast('请选择支行银行');
						return false;
					}
				}
				return true;
			},
			nextStep() {
				if (this.ruleValidation()) {
					let data = {
						seller_id: this.sellerId,
						payment_type: this.ids,
						card_front_pic: this.halfRoadRoute,
						province_id: this.bankInfo.province_id,
						city_id: this.bankInfo.city_id,
						account: this.bankInfo.account,
						mobile: this.bankInfo.mobile,
						name: this.bankInfo.name,
						open_licence_no: this.bankInfo.open_licence_no,
						bank_code: this.bankInfo.bank_code,
						branch_code: this.ids == 2 ? this.bankInfo.branch_code : '',
						mask: 1
					};
					console.log(data);
					settledFourSave(data).then(res => {
						console.log(res);
						if (res.code == 1) {
							uni.navigateTo({
								url: '/pagesMy/businessJoin/success'
							})
						}
					})
				}
			},
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
	}

	.custom_box {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		padding-bottom: 10rpx;
		opacity: 1;
	}

	.indexbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 260rpx;
		z-index: 7;
	}

	.custom_nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		font-size: 36rpx;
		z-index: 9;
		color: #FFFFFF;
	}

	.goback {
		position: absolute;
		left: 30rpx;
		text-align: center;
		width: 40rpx;
		height: 40rpx;
	}

	.mt24 {
		margin-top: 24rpx;
	}

	.mt40 {
		margin-top: 40rpx;
	}

	.ml8 {
		margin-left: 8rpx;
	}

	.mr10 {
		margin-right: 10rpx;
	}

	.sylc_box {
		background: #ffffff;
		border-radius: 14rpx;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 60rpx;

		/* #ifdef H5 */
		margin-top: 24rpx;
		/* #endif */
	}

	.technological {
		position: relative;
		width: 690rpx;
		padding: 30rpx 0;
	}

	.sylc {
		font-size: 32rpx;
		color: #333333;
		margin: 20rpx 30rpx 0;
	}

	.first {
		width: 200rpx;
	}

	.first>image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-bottom: 30rpx;
	}

	.second {
		width: 200rpx;
	}

	.second>image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-bottom: 30rpx;
	}

	.xuxian {
		position: absolute;
		top: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 100rpx;
	}

	.xuxian>image {
		width: 60rpx;
		height: 36rpx;
	}

	.xuxian2 {
		position: absolute;
		top: 50rpx;
		left: 70%;
		transform: translateX(-50%);
		width: 100rpx;
	}

	.xuxian2>image {
		width: 60rpx;
		height: 36rpx;
	}

	.store_name {
		width: 690rpx;
		font-size: 34rpx;
		color: #333333;
		font-weight: 700;
	}

	.supplement {
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		padding: 24rpx 32rpx;
	}

	.lineb {
		border-bottom: 1rpx solid rgba(100, 100, 100, 0.1);
	}

	.lanse {
		display: flex;
		align-items: baseline;
		padding: 10rpx 16rpx;
		width: 616rpx;
		background: #EEF1FF;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		margin: 14rpx 0;
	}

	.lanse>text {
		margin-left: 6rpx;
	}

	.btn_select {
		text-align: center;
		width: 198rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #579BFF;
		font-size: 24rpx;
		color: #579BFF;
	}

	.active {
		font-size: 24rpx;
		width: 198rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		background: #579BFF;
		color: #ffffff;
	}

	/* 	.uploads {
		width: 202rpx;
		height: 202rpx;
		background: #F3F3F3;
		border-radius: 8rpx;
		margin-right: 24rpx;
	} */

	.uploadimg {
		width: 588rpx;
		height: 360rpx;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
		z-index: 9;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 500;
		text-align: center;
		background: #579BFF;
		border-radius: 20rpx;
	}

	.select_box {
		margin-top: 24rpx;
		margin-right: 20rpx;
	}

	.area_popup {
		width: 750rpx;
		height: 1200rpx;
		position: relative;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		margin: 0 auto;
	}

	.yinhang {
		width: 622rpx;
	}

	.titles {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 750rpx;
		background: #ffffff;
		border-bottom: 1rpx solid #cccccc;
	}

	.titles>text {
		margin-top: 20rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
	}

	.titles_input {
		width: 650rpx;
		/* background: #eeeeee; */
		margin: 20rpx auto;
		padding: 14rpx 0;
	}

	.titles_input>input {
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.masks {
		width: 750rpx;
		height: 220rpx;
		/* background: pink; */
	}

	.popup_list {
		width: 750rpx;
		height: 1200rpx;
		overflow: auto;
		/* padding: 0 30rpx; */
	}

	.area_box {
		width: 100%;
		padding: 14rpx 0;
		font-size: 30rpx;
		color: #333333;
		border-bottom: 1rpx solid rgba(200, 200, 200, 0.1);
		padding-left: 20rpx;
		padding: 20rpx 30rpx;
	}

	.active2 {
		color: #ffffff !important;
		background: #579BFF !important;
	}

	.noImg {
		width: 290rpx;
		height: 240rpx;
	}

	.no_tit {
		font-size: 28rpx;
		color: #666666;
		margin-top: 30rpx;
	}

	/deep/.u-input__content {
		margin-left: -20rpx;
	}

	/deep/.u-icon__icon {
		font-size: 30rpx !important;
		line-height: 30rpx !important;
	}
</style>